<template>
	<view class="yxyl-album-item-container">
		<view class="yxyl-album-item-title">
			<text class="title">{{ itemData.albumTitle }}</text>
			<text class="btn" @tap="routeHandler(itemData.target)">播放</text>
		</view>
		<view class="yxyl-album-item-list">
			<view class="yxyl-album-item-list-item" @tap="routeHandler(item.target)" v-for="(item, index) in itemData.itemTitles" :key="index">
				<fa-icon class="icon" color="#F44336" type="play-circle-o" size="20"></fa-icon>
				<text class="title">{{ item.title }}</text>
			</view>
		</view>
	</view>
</template>
<script>
import faIcon from '@/components/kilvn-fa-icon/fa-icon.vue';
import routeUtil from '@/util/routeUtil.js';
export default {
	components: { faIcon },
	props: {
		itemData: {
			type: Object,
			default: function() {
				return {};
			}
		}
	},
	methods: {
		routeHandler(target) {
			routeUtil.routeHandler(target);
		}
	}
};
</script>

<style lang="scss" scoped>
.yxyl-album-item-container {
	width: 100%;
	border: 1px solid $uni-color-main-dark;
	min-height: 250rpx;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	.yxyl-album-item-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		margin: 0 auto;
		margin-top: 10rpx;
		.title {
			font-size: 34rpx;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
			display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
			-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
			-webkit-line-clamp: 2; /* 文本需要显示多少行 */
		}
		.btn {
			padding: 0 10px;
			margin-right: 20rpx;
			background: $uni-color-main-dark;
			color: #fff;
			border-radius: 10px;
			flex-basis: 10%;
			flex-shrink: 0;
			flex-grow: 0;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 24rpx;
			text-align: center;
		}
	}
	.yxyl-album-item-list {
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		.yxyl-album-item-list-item {
			display: flex;
			align-items: center;
			padding: 5px 0;
			.icon {
				padding-right: 10rpx;
			}
			.title {
				overflow: hidden;
				text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
				display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
				-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
				-webkit-line-clamp: 1; /* 文本需要显示多少行 */
				font-size: 28rpx;
			}
		}
	}
}
</style>
